<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper mt-5">
      <a-form-model layout="inline" :model="queryParam" @submit="$refs.table.refresh(true)" @submit.native.prevent>
        <a-row :gutter="50">
          <a-col :span="8">
            <a-form-model-item label="用户名">
              <a-input v-model="queryParam.username" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="真实姓名">
              <a-input v-model="queryParam.realname" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <div class="table-page-search-submitButtons">
              <a-button size="small" type="primary" @click="() => this.queryParam = {}">清空</a-button>
              <a-button size="small" type="primary" html-type="submit">搜索</a-button>
              <a-button size="small" type="primary" @click="onEdit({})">添加</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <s-table
      ref="table"
      :columns="columns"
      rowKey="userId"
      :data="loadData"
    >
      <template slot="roles" slot-scope="text, record">
        <a-tag v-for="role in record.roles" :key="role.roleId" color="blue">
          {{ role.roleName }}
        </a-tag>
      </template>
      <template slot="action" slot-scope="text, record">
        <a @click="onEditRole(record)">授权</a>
        <a-divider type="vertical" />
        <a @click="onEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a @click="onDel(record)">删除</a>
      </template>
    </s-table>

    <user-info v-if="userInfoModal" :info="userInfo" @close="onCloseUserModal" />

    <role-info v-if="roleInfoModal" :info="userInfo" @close="onCloseRoleModal" />
  </a-card>
</template>

<script>
import { STable } from '@/components'
import UserInfo from '@/views/sys/user/user-info'
import RoleInfo from '@/views/sys/user/role-info'
import { getUserPage, deleteUserById } from '@/api/user'

const columns = [
  {
    title: '用户名',
    dataIndex: 'username',
    align: 'center'
  },
  {
    title: '真实姓名',
    dataIndex: 'realname',
    align: 'center'
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    align: 'center'
  },
  {
    title: '角色',
    dataIndex: 'roles',
    align: 'center',
    width: 150,
    scopedSlots: { customRender: 'roles' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    customRender: (text) => {
      return text === 0 ? '停用' : '启用'
    }
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    width: '200px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'UserList',
  components: {
    RoleInfo,
    UserInfo,
    STable
  },
  data () {
    this.columns = columns
    return {
      formInline: {
        user: '',
        password: ''
      },
      // create model
      userInfoModal: false,
      roleInfoModal: false,
      userInfo: {},
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const { pageNo, pageSize } = parameter
        return getUserPage(pageNo, pageSize, this.queryParam).then(response => {
          return response.data
        })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    onCloseUserModal (query) {
      this.userInfoModal = false
      this.userInfo = {}
      if (typeof query === 'boolean') {
        this.$refs.table.refresh(query)
      }
    },
    onCloseRoleModal (query) {
      this.roleInfoModal = false
      this.userInfo = {}
      if (typeof query === 'boolean') {
        this.$refs.table.refresh(query)
      }
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onEdit (record) {
      this.userInfo = record
      this.userInfoModal = true
    },
    onEditRole (record) {
      this.userInfo = record
      this.roleInfoModal = true
    },
    onDel (record) {
      const that = this
      this.$confirm({
        title: '系统提示',
        content: `确定删除${record.username}吗？`,
        onOk () {
          deleteUserById(record.userId).then(() => {
            that.$message.success('删除成功')
            that.$refs.table.refresh(false)
          })
        }
      })
    }
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  }
}
</script>

<style scoped>

</style>
